<template>
	<div class="system-menu-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :fullscreen="true">
            <el-descriptions
                title="案件详情"
                size="large"
                :column="4"
                border
            >
                <el-descriptions-item label-align="center">
                    <template #label>
                        案例号
                    </template>
                    {{ state.ruleForm.caseNo }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        案件名
                    </template>
                    {{ state.ruleForm.caseName }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        法院
                    </template>
                    {{ state.ruleForm.courtId }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        承办律师
                    </template>
                    {{ state.ruleForm.layer.lawyer }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        承办律所
                    </template>
                    {{ state.ruleForm.layer.lawFirm }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        律师电话
                    </template>
                    {{ state.ruleForm.layer.phone }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        律师联系地址
                    </template>
                    {{ state.ruleForm.layer.address }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        执行标的
                    </template>
                    {{ state.ruleForm.subjectMatterMoney }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        回款金额
                    </template>
                    {{ state.ruleForm.returnMoney }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        当事人类型
                    </template>
                    <div v-if="state.ruleForm.entrustType == 0">企业</div>
                    <div v-if="state.ruleForm.entrustType == 1">个人</div>
                </el-descriptions-item>
                <div v-if="state.ruleForm.entrustType == 0">
                    <el-descriptions-item label-align="center">
                        <template #label>
                            名称
                        </template>
                        {{ state.ruleForm.entrust.name }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            行业
                        </template>
                        {{ state.ruleForm.entrust.industry }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            注册登记号
                        </template>
                        {{ state.ruleForm.entrust.registerNo }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            注册地址
                        </template>
                        {{ state.ruleForm.entrust.registerAddress }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            联系人
                        </template>
                        {{ state.ruleForm.entrust.contacts }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            联系电话
                        </template>
                        {{ state.ruleForm.entrust.phone }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            联系地址
                        </template>
                        {{ state.ruleForm.entrust.address }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            是否为被执行人
                        </template>
                        <div v-if="state.ruleForm.entrust.isExecute == 0">否</div>
                        <div v-if="state.ruleForm.entrust.isExecute == 1" style="color:red">是</div>
                    </el-descriptions-item>
                </div>
                <div v-if="state.ruleForm.entrustType == 1">
                    <el-descriptions-item label-align="center">
                        <template #label>
                            姓名
                        </template>
                        {{ state.ruleForm.entrust.name }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            国籍/地区
                        </template>
                        {{ state.ruleForm.entrust.country }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            证件号码
                        </template>
                        {{ state.ruleForm.entrust.cardNo }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            性别
                        </template>
                        <div v-if="state.ruleForm.entrust.sex == 0">未知</div>
                        <div v-if="state.ruleForm.entrust.sex == 1">男</div>
                        <div v-if="state.ruleForm.entrust.sex == 2">女</div>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            年龄
                        </template>
                        {{ state.ruleForm.entrust.age }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            联系电话
                        </template>
                        {{ state.ruleForm.entrust.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            微信号
                        </template>
                        {{ state.ruleForm.entrust.wechat }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            联系地址
                        </template>
                        {{ state.ruleForm.entrust.address }}
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            是否为被执行人
                        </template>
                        <div v-if="state.ruleForm.entrust.isExecute == 0">否</div>
                        <div v-if="state.ruleForm.entrust.isExecute == 1" style="color:red">是</div>
                    </el-descriptions-item>
                </div>
                
            </el-descriptions>
            
            <el-descriptions
                size="large"
                style="margin-top: 10px"
                :column="2"
                direction="vertical"
                border
            >
                <el-descriptions-item label-align="center" width="200" class-name="description-table-left" style="" >
                    <el-timeline style="min-width: 200px">
                        <el-timeline-item timestamp="2018/4/12" color="#0bbd87" placement="top">
                            <el-card>
                                <h4>执行立案</h4>
                                <p>张三 2018/4/12 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/3" color="#0bbd87" placement="top">
                            <el-card>
                                <h4>确定承办人</h4>
                                <p>张三 2018/4/3 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/2" color="#0bbd87" placement="top">
                            <el-card>
                                <h4>财产查询</h4>
                                <p>张三 2018/4/2 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/2" color="#0bbd87" placement="top">
                            <el-card>
                                <h4>财产控制</h4>
                                <p>张三 2018/4/2 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/2" color="#0bbd87" placement="top">
                            <el-card>
                                <h4>财产处置</h4>
                                <p>张三 2018/4/2 20:46</p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-descriptions-item>
                <el-descriptions-item label-align="center" width="700"  class-name="description-table" >
                    <el-descriptions
                        size="large"
                        style="margin-top: 10px"
                        :column="1"
                        direction="vertical"
                        border
                        v-if="state.companyCount > 0"
                    >
                        <el-descriptions-item label-align="center" class-name="description-table" >
                            <template #label>
                                被执行人-企业
                            </template>
                            <Company  ref="companyRef" :key="state.dataKey" :caseId="state.ruleForm.id"/>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        size="large"
                        style="margin-top: 10px"
                        :column="1"
                        direction="vertical"
                        border
                        v-if="state.personCount > 0"
                    >
                        <el-descriptions-item label-align="center" class-name="description-table" >
                            <template #label>
                                被执行人-个人
                            </template>
                            <Person  ref="personRef" :key="state.dataKey" :caseId="state.ruleForm.id"/>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        size="large"
                        style="margin-top: 10px"
                        :column="1"
                        direction="vertical"
                        border
                    >
                        <el-descriptions-item label-align="center" class-name="description-table" >
                            <template #label>
                                执行法官
                            </template>
                            <Judge  ref="judgeRef" :key="state.dataKey" :caseId="state.ruleForm.id"/>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        size="large"
                        style="margin-top: 10px"
                        :column="1"
                        direction="vertical"
                        border
                    >
                        <el-descriptions-item label-align="center" class-name="description-table" >
                            <template #label>
                                违法行为线索
                            </template>
                            <Offence  ref="offenceRef"/>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        size="large"
                        style="margin-top: 10px"
                        :column="1"
                        direction="vertical"
                        border
                    >
                        <el-descriptions-item label-align="center" class-name="description-table" >
                            <template #label>
                                财产线索
                            </template>
                            <el-tabs v-model="activeName" class="demo-tabs" >
                                <el-tab-pane label="银行账户" name="bank">
                                    <Bank  ref="bankRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="不动产" name="realestate">
                                    <Realestate  ref="realestateRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="车辆/船舶" name="car">
                                    <Car  ref="carRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="其他动产" name="movables">
                                <Movables ref="movablesRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="股权/合伙份额" name="shareholding">
                                    <Shareholding ref="shareholdingRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="其他金融资产" name="stock">
                                    <Stock ref="stockRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="债券" name="Bond">
                                    <Bond ref="bondRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="担保" name="security">
                                    <Security ref="securityRef"/> 
                                </el-tab-pane>
                                <el-tab-pane label="商标" name="trademark">
                                    <Trademark ref="trademarkRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="专利" name="patent">
                                    <Patent ref="patentRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="作品著作权" name="works">
                                    <Works ref="worksRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="软件著作权" name="software">
                                    <Software ref="softwareRef"/>
                                </el-tab-pane>
                                <el-tab-pane label="域名" name="domain">
                                    <Domain ref="domainRef"/>
                                </el-tab-pane>
                            </el-tabs>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-descriptions-item>
            </el-descriptions>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onCancel" size="default">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="cgcompanyForm">
import { reactive, defineAsyncComponent,onMounted, ref ,unref,nextTick} from 'vue';
import { CloseBold,Select } from '@element-plus/icons-vue'
import { getinfo,save } from '/@/api/cgcase/index';
import {  ElMessage } from 'element-plus';
const Offence = defineAsyncComponent(() => import('/@/views/cogen/cgoffence/offence.vue'));
const Bank = defineAsyncComponent(() => import('/@/views/cogen/cgbank/bank.vue'));
const Realestate = defineAsyncComponent(() => import('/@/views/cogen/cgrealestate/realestate.vue'));
const Car = defineAsyncComponent(() => import('/@/views/cogen/cgcar/car.vue'));
const Movables = defineAsyncComponent(() => import('/@/views/cogen/cgmovables/movables.vue'));
const Shareholding = defineAsyncComponent(() => import('/@/views/cogen/cgshareholding/shareholding.vue'));
const Stock = defineAsyncComponent(() => import('/@/views/cogen/cgstock/stock.vue'));
const Bond = defineAsyncComponent(() => import('/@/views/cogen/cgbond/bond.vue'));
const Security = defineAsyncComponent(() => import('/@/views/cogen/cgsecurity/security.vue'));
const Trademark = defineAsyncComponent(() => import('/@/views/cogen/cgtrademark/trademark.vue'));
const Patent = defineAsyncComponent(() => import('/@/views/cogen/cgpatent/patent.vue'));
const Works = defineAsyncComponent(() => import('/@/views/cogen/cgworks/works.vue'));
const Software = defineAsyncComponent(() => import('/@/views/cogen/cgsoftware/software.vue'));
const Company = defineAsyncComponent(() => import('/@/views/cogen/cgcompany/company.vue'));
const Person = defineAsyncComponent(() => import('/@/views/cogen/cgperson/person.vue'));
const Judge = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/judge.vue'));
const Domain = defineAsyncComponent(() => import('/@/views/cogen/cgdomain/domain.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);


// 定义变量内容
const activeName = ref('bank');
const dialogFormRef = ref();
const state = reactive({
	ruleForm: {
        caseNo:'',
		caseName:'',
		courtId:'',
		entrustType:'',
		entrustId:'',
		lawId:'',
		subjectMatterMoney:'',
		returnMoney:'',
		caseStatus:'',
		personList:[],
		judge:[],
        layer:{},
        entrust:{},
		id:'',
    },
    companyCount:0,
    personCount:0,
	dataKey:Date.now(),
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	// 表单校验
	ruleRules:  { 
    name: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
  },
	loading: false,
	msg:'最佳尺寸100*100',
});


const onUpload = (data) => {
	state.ruleForm.img = data;
};

const onUploadvedio = (data) => {
	state.ruleForm.video = data;
};

// 打开弹窗
const openDialog = (type: string, row?: any) => {
		// 实际请走接口
    state.ruleForm.id = row.id;
    getinfo(row.id).then((response: any) => {
        state.ruleForm.caseNo = response.data.caseNo;
        state.ruleForm.caseName = response.data.caseName;
        state.ruleForm.courtId = response.data.courtId;
        state.ruleForm.entrustType = response.data.entrustType;
        state.ruleForm.entrustId = response.data.entrustId;
        if(state.ruleForm.entrustType == 0) {
            state.ruleForm.companyId = response.data.entrustId;
        } else {
            state.ruleForm.personId = response.data.entrustId;
        }
        state.ruleForm.lawId = response.data.lawId;
        state.ruleForm.layer = response.data.layer;
        state.ruleForm.judge = response.data.judge;
        state.ruleForm.subjectMatterMoney = response.data.subjectMatterMoney;
        state.ruleForm.returnMoney = response.data.returnMoney;
        state.ruleForm.caseStatus = response.data.caseStatus;
        state.ruleForm.entrust = response.data.entrust;
        const personList = response.data.personList;
        personList.forEach(function (item:any, index:any) {
            if (item.linkType == 0){
                state.companyCount = state.companyCount + 1;
            }	else {
                state.personCount = state.personCount + 1;
            }
        });
    });
	state.dialog.type = type;
    state.dataKey = Date.now();
	state.dialog.isShowDialog = true;
	// 查询
	
};
// 关闭弹窗
const closeDialog = () => {
	initForm();
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	const formWrap = unref(dialogFormRef) as any;
	if (!formWrap) return;
	formWrap.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			save(state.ruleForm)
				.then(() => {
					ElMessage.success('保存成功');
					state.loading = false;
					closeDialog(); // 关闭弹窗
					emit('refresh');
				})
				.finally(() => {
					state.loading = false;
				});
		}
	})
};
// 页面加载时
onMounted(() => {
	
});


// 表单初始化，方法：`resetFields()` 无法使用
const initForm = () => {
	state.ruleForm.caseNo = '';
	state.ruleForm.caseName = '';
	state.ruleForm.courtId = '';
	state.ruleForm.entrustType = '';
	state.ruleForm.entrustId = '';
	state.ruleForm.companyId = "";
	state.ruleForm.personId = "";
	state.ruleForm.lawId = '';
	state.ruleForm.judge = [];
	state.ruleForm.subjectMatterMoney = '';
	state.ruleForm.returnMoney = '';
	state.ruleForm.caseStatus = '';
	state.ruleForm.personList = [];
    state.ruleForm.layer = {};
    state.ruleForm.entrust = {};
	state.ruleForm.id = '';
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style>
.el-tabs__nav-wrap {
 padding-left: 15px !important;
 padding-top: 15px !important;
}
.el-tabs__header {
    margin-top: 0px;
    margin-bottom: 0px;
}
.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
    max-height: 90% !important;
}
.description-table-left {
    padding: 20px !important; 
    vertical-align: top !important;
}
.description-table {
    padding: 0 !important;
    vertical-align: top;
    padding-left: 10px !important;
}
.el-descriptions--large .el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    font-size: 15px !important;
}
.el-descriptions--large .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
    padding:15px;
}
.el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background: rgba(24, 144, 255, 0.1);
}
.el-descriptions {
    --el-descriptions-table-border: 1px solid rgba(24, 144, 255, 0.1)
}
</style>